<!--
 * @Author: xiaopang
 * @Date: 2025-10-16 11:28:32
 * @LastEditTime: 2025-10-24 15:46:45
 * @LastEditors: xiaopang
-->
<template>
  <div class="h-screen bg-#F8F8F8">
    <van-nav-bar title="消费券核销" left-arrow></van-nav-bar>
    <div class="px-15px py-20px">
      <div class="bg-white rounded-8px pt-20px pb-40px px-10px text-14px text-#333333" v-if="writeOffResult === ''">
        <div class="mb-12px">
          <div class="font-bold">消费券码</div>
          <div class="h-40px mt-8px bg-#F8F8F8 rounded-2px border border-1px border-#F3F3F3">
            <van-field v-model="phone" placeholder="请输入" />
          </div>
        </div>
        <div class="mb-12px">
          <div class="font-bold">订单号</div>
          <div class="h-40px mt-8px bg-#F8F8F8 rounded-2px border border-1px border-#F3F3F3">
            <van-field v-model="phone" placeholder="请输入" />
          </div>
        </div>
        <div class="mb-12px">
          <div class="font-bold">订单金额</div>
          <div class="h-40px mt-8px bg-#F8F8F8 rounded-2px border border-1px border-#F3F3F3">
            <van-field v-model="phone" placeholder="请输入" />
          </div>
        </div>
        <div class="mb-42px">
          <div class="font-bold">核销金额</div>
          <div class="h-40px mt-8px bg-#F8F8F8 rounded-2px border border-1px border-#F3F3F3">
            <van-field v-model="phone" placeholder="请输入" />
          </div>
        </div>
        <div class="flex items-center justify-center gap-55px">
          <div class="flex items-center justify-center w-100px h-40px bg-#ccc rounded-4px text-16px text-#F7F7F7">取消</div>
          <div class="flex items-center justify-center w-100px h-40px bg-#FC6C53 rounded-4px text-16px text-#fff">核销</div>
        </div>
      </div>
      <write-off-successful v-if="writeOffResult === 'successful'" />
      <write-off-failed v-if="writeOffResult === 'failed'" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import writeOffSuccessful from '@/views/write-off-successful.vue';
import writeOffFailed from '@/views/write-off-failed.vue';

const phone = ref('');
const writeOffResult = ref('successful');
</script>
